<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="">
    <title>Document</title>
    
</head>
<body>
    <canvas id="myCanvas" width="500px" height="500px" style="border:1px  solid black"></canvas>
        <script>
          var c = document.getElementById("myCanvas")
          var cxt = c.getContext("2d")

          cxt.beginPath();
          cxt.fillStyle = "hsla(200,50%,50%,1)"            
          cxt.fillRect(0, 0, 100, 100);  
          cxt.fillStyle = "hsla(120,50%,50%,0.5)"      
          cxt.arc(100, 100, 80, 0, Math.PI * 2, true); // Outer circle
          cxt.fill();     
          cxt.closePath();
   
          cxt.beginPath();
          cxt.strokeStyle = "rgb(30,182,0)"
          cxt.moveTo(10,10)
          cxt.lineTo(150,50)
          cxt.lineTo(10,50)  
          cxt.lineWidth=12;
          cxt.stroke()
          cxt.closePath()
          window.location=c.toDataURL('image/jpg')
          var a = document.createElement('a');
            a.href = dataURL;
            a.download = 'canvas-dow.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        </script>    
</body>
</html>